import React, { useEffect, useState } from 'react';
import { Tabs,Layout,Menu } from "antd";
const { Header, Content, Footer,Sider } = Layout;
import { LikeOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';
import { Avatar, List, Space } from 'antd';
import { getList } from "@/apis/api";
import Search from "@/computed/Search.jsx";
import instance from "../../apis/request.js";
import { useNavigate } from 'react-router-dom';
const IconText = ({ icon, text }: { icon: React.FC; text: string }) => (
  <Space>
    {React.createElement(icon)}
    {text}
  </Space>
);
function Home() {
    const [data,setData]=useState('')
    // const aa=async()=>{
    //     const res=await instance.get('/artilce/list',{
    //         params:data
    //     }).then(res=>{
    //         console.log(res);

    //     })
    // }
    
    const onchangesou=(k)=>{
        console.log(k);
        if(k.keyword===''){
          alert('暂无相关内容')
          
        }else{
          setTt(true)
        }
        // setData({
        //   title:'2'
        // })
        
    
    }
    const aa=async()=>{
        const res=await getList({
            page:1,//页码  必传
pageSize:6,//每页显示条数 必传
keyword:null,//搜索标题
tag:null//搜索标签

        })
        console.log(res.data.rows);
        setData(res.data.rows)
    }
    useEffect(()=>{
        aa()
    },[])
    
    const navigate=useNavigate()
    const tiao=(id)=>{
        console.log(id);
        navigate(`/detail/${id}`)
    }
    const [tt,setTt]=useState(false)
    const data11 = [
  {
    title: '1231',
  },
  
];
    return (
        <div>
            <div style={{
                backgroundColor:'#fff',height:'500px',float:'left',
                marginLeft:'40px',marginRight:'40px',marginTop:'30px'

            }}>
                <Layout>
                    <Sider>
                        <Menu mode="inline" defaultSelectedKeys={['1']} defaultOpenKeys={['sub1']} style={{ height: '100%', borderRight: 0 }}>
                            <Menu.Item key="1">关注</Menu.Item>
                            <Menu.Item key="2">综合</Menu.Item>
                            <Menu.Item key="3">后端</Menu.Item>
                            <Menu.Item key="4">前端</Menu.Item>
                            <Menu.Item key="5">Android</Menu.Item>
                            <Menu.Item key="6">iOS</Menu.Item>
                            <Menu.Item key="7">人工智能</Menu.Item>
                            <Menu.Item key="8">开发工具</Menu.Item>
                            <Menu.Item key="9">代码人生</Menu.Item>
                            <Menu.Item key="10">阅读</Menu.Item>
                            <Menu.Item key="11">排行榜</Menu.Item>
                        </Menu>
                    </Sider>
                </Layout>
                {/* <Tabs type='card' tabPosition='left' defaultActiveKey="1" > 
                    <Tabs.TabPane tab="Tab 1" key="1"> 
                        
                    </Tabs.TabPane>
                    <Tabs.TabPane tab="Tab 1" key="2"> 
                        
                    </Tabs.TabPane>
                    
                </Tabs> */}
            </div>
            <div style={{backgroundColor:'#fff',width:'1000px',height:'800px',float:'left'}}>
                <Search kkk={onchangesou}/>
                {tt?<List
    itemLayout="vertical"
    size="large"
    
    dataSource={data11}
    footer={
      <div>
        <b>ant design</b> footer part
      </div>
    }
    renderItem={(item,index) => (
      <List.Item
        key={index}
        actions={[
          <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
          <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
          <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
        ]}
        extra={
          <img
            draggable={false}
            width={202}
            alt="logo"
            src="https://ts4.tc.mm.bing.net/th?id=ORMS.0eb224554327991186adc63a42886214&pid=Wdp&w=268&h=140&qlt=90&c=1&rs=1&dpr=1&p=0"
          />
        }
      >
        <List.Item.Meta
          title={<p >1231</p>}
          description={item.description}
        />
        3131
      </List.Item>
    )}
  />:
                <List
    itemLayout="vertical"
    size="large"
    
    dataSource={data}
    footer={
      <div>
        <b>ant design</b> footer part
      </div>
    }
    renderItem={(item) => (
      <List.Item
        key={item.id}
        actions={[
          <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,
          <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,
          <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,
        ]}
        extra={
          <img
            draggable={false}
            width={202}
            alt="logo"
            src="https://ts4.tc.mm.bing.net/th?id=ORMS.0eb224554327991186adc63a42886214&pid=Wdp&w=268&h=140&qlt=90&c=1&rs=1&dpr=1&p=0"
          />
        }
      >
        <List.Item.Meta
          title={<p onClick={()=>tiao(item.id)}>{item.title}</p>}
          description={item.description}
        />
        {item.content}
      </List.Item>
    )}
  />
                }
                
            </div>
        </div>
    );
}

export default Home;